<template>
  和为{{sum}}
  <br>
  <button @click="sum++">加一</button>
</template>

<script>
// import { ref,onMounted,onBeforeMount,onBeforeUpdate,onUpdated,onUnmounted,onBeforeUnmount} from "vue";
import { ref,onBeforeUpdate} from "vue";

export default {
  
  name:"Demo",
  setup(props,context) {
    console.log('-------setup---------');
    let sum = ref(0)

    // 通过组合式api调用声明周期钩子
    onBeforeUpdate(()=>{
      console.log('--------------onBeforeUpdate-------------');
    })

    // 暴露数据
    return {
     sum
    }
    
  },

  // 1. 通过配置项形式声明周期函数钩子
  /*
    beforeCreate() {
      console.log('----------beforeCreate-----------');
    },
    created() {
      console.log('----------created-----------');
    },
    beforeMount() {
      console.log('----------beforeMount-----------'); 
    },
    mounted() {
      console.log('----------mounted-----------'); 
    },
    beforeUpdate() {
      console.log('---------------beforeUpdate--------------');
    },
    updated() {
      console.log('-------------------updated--------------');
    },
    beforeUnmount() {
      console.log('----------------beforeUnmount--------------');
    },
    unmounted() {
      console.log('----------------unmounted--------------');
    },
  */
}
</script>

<style>
  button {
    margin: 3px 10px;
  }
</style>